<template>
	<div class="app">
		<myNavbar :title="title"></myNavbar>
		<selectDeposit @completesEelect="completesEelect" @clearSelect="clearSelect" v-if="isSelectDeposit"></selectDeposit>
		<selectPayment v-if="isSelectPayment" @closeSelect="closeSelect" @paysEelect="paysEelect"></selectPayment>
		<div class="register-list">
			<div class="register-item bb" @click="showSelect">
				<text class="item-label">商品名称</text>
				<div class="item-content">
					<text class="item-content-text" :style="{'color': form.name? '': '#999'}">{{form.name?form.name:'请选商品'}}</text>
					<text class="item-content-icon">&#xe61f;</text>
				</div>
			</div>
			<div class="register-item bb">
				<text class="item-label">{{title}}数量</text>
				<input class="item-content-input" :placeholder="'请输入' + title + '数量'" type="number" :accept="right" v-model="form.quantity" />
	
			</div>
			<div class="register-item bb" @click="showPayment">
				<text class="item-label">付款方式</text>
				<div class="item-content">
					<text class="item-content-text" :style="{'color': form.payName? '': '#999'}">{{form.payName?form.payName:'付款方式'}}</text>
					<text class="item-content-icon">&#xe61f;</text>
				</div>
			</div>
		</div>
		<div class="button_click" @click="finishClick"><text style="font-size: 30px;color: white;">完成</text></div>
	</div>
</template>
<script>
	import selectDeposit from './components/selectDeposit.vue'
	import selectPayment from './components/selectPayment.vue'
	import myNavbar  from  '../../../../components/myNavbar/myNavbar.vue'
	import {add,dec} from '../../../../api/virtualProduct.js'
export default {
  name: '',
 data () {
    return {
		memberId:'',
		isSelectDeposit:false,
		isSelectPayment:false,
		type:'',
		title:'',
		form:{
			name:'',
			payName:'',
			paymentPluginId:'',
			quantity:'',
			productId:'',
		}
	}
  }, 
  created () { // 在实例创建完成后被立即调用
  let params= app.config.params;
  this.memberId=params.id
  this.title=params.title
  this.type=params.type
  },

  methods: {
	  finishClick(){
		  if(this.form.productId==''){
			  eeui.toast({ message: '请选择商品' })
			  return
		  }else if(this.form.paymentPluginId==''){
			  eeui.toast({ message: '请选择付款方式' })
			  return
		  }else if(this.form.quantity==''){
			  eeui.toast({ message: '请输入桶数量' })
			  return
		  }
		  if(this.type=='return'){
			  dec({
				    memberId:this.memberId,
				    productId:this.form.productId,
				    quantity:this.form.quantity,
				    paymentPluginId:this.form.paymentPluginId
			  }).then(res=>{
				  if(res.type=='success'){
				
					 storage.setItem('adddeposit', 'add')
					 eeui.closePage()
				  }
			  })
		  }else{
		
			  add({
				  memberId:this.memberId,
				  productId:this.form.productId,
				  quantity:this.form.quantity,
				  paymentPluginId:this.form.paymentPluginId
			  }).then(res=>{
				  if(res.type=='success'){
				storage.setItem('adddeposit', 'add')
				eeui.closePage()
			
				  }
			  })
		  }
	  },
	  completesEelect(data){
		 this.isSelectDeposit=false
		 this.form.productId=data.id
		  this.form.name=data.name
	  },
	  clearSelect(){
		  this.isSelectDeposit=false
	  },
	  showPayment(){
		  this.isSelectPayment=true
	  },
	  closeSelect(){
		  this.isSelectPayment=false
	  },
	  paysEelect(data){
		   this.isSelectPayment=false
		   this.form.payName=data.name
		   this.form.paymentPluginId=data.paymentPluginId
	  },
	  showSelect(){
		  this.isSelectDeposit=true
	  },
  },
  components: {myNavbar,selectDeposit,selectPayment},
}
</script>

<style scoped>
	.app{
		flex: 1;
		width: 750px;
		background-color: white;
		
	}
	.register-list {
			margin: 20px 20px;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 16px;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(248, 248, 248, 0.3);
		}
		.register-item {
			padding: 0 27px;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 102px;
			font-size: 28px;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(26, 26, 30, 1);
			display: flex;
			align-items: center;
			position: relative;
		}
		.item-label {
			padding-right: 30px;
			font-size: 28px;
		}
		.item-content {
			flex-direction: row;
			align-items: center;
		}
		.item-content-text {
			font-size: 28px;
		}
		.item-content-icon {
			margin-left: 10px;
			color: gray;
			font-size: 36px;
			font-family: iconfont2;
			color: #cccccc;
		}
		.item-content-input {
			width: 460px;
			height: 50px;
			font-size: 28px;
			text-align: right;
		}
		.bb {
			border-bottom-style: solid;
	        border-bottom-width: 4px;
	        border-bottom-color: rgba(128, 128, 128, 0.062);
		}
		.register-list-submit {
			align-items: center;
			justify-content: center;
			margin: 20px 20px 0;
			width: 710px;
			display: block;
			height: 82px;
		    background-color: #409EFF;
			border-radius: 16px;
	        font-size: 32px;
	        color: white;
		}
	
		.register-list-submit-btn {
			font-size: 32px;
			letter-spacing: 5px;
		    color: white;
		}
		.isMask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 750px;
			background-color: rgba(0, 0, 0, 0.3);
		}
		.button_click{
			position: absolute;
			bottom: 10px;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 70px;
			width: 740px;
			margin-left: 5px;
			background-color: #409EFF;
			
		}
</style>
